import UInput from './components/UInput';
import USelect from './components/USelect';

export default {
  components: {
    UInput,
    USelect
  },
  methods: {
    // TODO:input
    renderInput(createElement, config, values, callback) {
      return createElement(
        'el-input',
        {
          style: {
            // width: '200px'
          },
          props: {
            value: values[config.name] || '',
            ...config.props
          },
          on: {
            input: (val) => {
              values[config.name] = val;
              config.change && config.change(val);
            }
          }
        },
        []
      );
    },
    // TODO:select
    renderSelect(createElement, config, values, callback) {
      return createElement(
        'el-select',
        {
          props: {
            value: values[config.name] || '',
            ...config.props
          },
          on: {
            input: (val) => {
              values[config.name] = val;
              config.change && config.change(val);
            }
          }
        },
        [
          config.props.options && 
            config.props.options.map(option => {
              return createElement('el-option', {
                props: option
              })
            })
        ]
      );
    },
    // TODO:date
    renderDatePicker(createElement, config, values, callback) {
      return createElement(
        'el-date-picker',
        {
          props: {
            value: values[config.name] || '',
            ...config.props
          },
          on: {
            input: (val) => {
              values[config.name] = val;
              config.change && config.change(val);
            },
            blur: (val) => {
              config.blur && config.blur(val);
            },
            focus: (val) => {
              config.focus && config.focus(val);
            }
          }
        },
        []
      );
    },
    // TODO:upload
    renderUpload(createElement, config, values, callback) {
      return createElement(
        'el-upload',
        {
          props: {
            // value: config.value,
            ...config.props,
            // 点击已上传文件触发
            'on-preview': (file) => {
              console.log('preview', file);
            },
            // 移除列表文件触发
            'on-remove': (file, fileList) => {
              console.log('remove', file, fileList);
              config.remove && config.remove(file);
            },
            // 上传前触发函数，返回false可以终止上传
            'before-upload': (file) => {

            },
            // 文件数量超过限制函数
            'on-exceed': () => {
              return this.$message.error('文件超出数量限制!');
            },
            // 上传成功
            'on-success': (response, file, fileList) => {
              console.log('success', response);
              console.log(fileList);
              // 是否多文件上传
              if (values[config.name] instanceof Array) {
                values[config.name].push(response.data);
              } else {
                values[config.name] = response.data;
              }
              config.success && config.success(val);
            },
            // 上传失败
            'on-error': (err) => {
              console.log('err', err);
              return this.$message.error('文件上传失败!');
            },
          },
          on: {}
        },
        [
          createElement(
            'el-button',
            {
              props: {
                size: 'small',
                type: 'primary'
              }
            },
            '点击上传'
          )
        ]
      );
    },
    // TODO:checkbox
    renderCheckbox(createElement, config, values, callback) {
      return createElement(
        'el-checkbox-group',
        {
          props: {
            value: values[config.name] || '',
            ...config.props
          },
          on: {
            input: (val) => {
              values[config.name] = val;
              config.change && config.change(val);
            }
          }
        },
        [
          config.props.options && 
            config.props.options.map(option => {
              return createElement('el-checkbox', {
                props: {
                  ...option,
                  name: config.name,
                  label: option.value
                }
              },
              [
                option.label
              ])
            })
        ]
      );
    },
    // TODO:switch
    renderSwitch(createElement, config, values, callback) {
      return createElement(
        'el-switch',
        {
          style: {
            // width: '200px'
          },
          props: {
            value: values[config.name] || false,
            ...config.props
          },
          on: {
            input: (val) => {
              values[config.name] = val;
              config.change && config.change(val);
            }
          }
        },
        []
      );
    },
    // TODO:radio
    renderRadio(createElement, config, values, callback) {
      return createElement(
        'el-radio-group',
        {
          props: {
            value: values[config.name] || '',
            ...config.props
          },
          on: {
            input: (val) => {
              values[config.name] = val;
              config.change && config.change(val);
            }
          }
        },
        [
          config.props.options && 
            config.props.options.map(option => {
              return createElement('el-radio', {
                props: {
                  label: option.value
                }
              },
              [
                option.label
              ])
            })
        ]
      );
    },

  }
}